<template>
  <div class="detailed-box">
    <back @goBack="back"></back>
    <div class="detailed-top">
      <div class="title-left fl" v-show="status">
        <span class="title-icon"></span>详情
      </div>
      <div class="title-left fl" v-show="!status">
        <span class="title-icon"></span>编辑
      </div>
      <div class="right fr" v-show="status">
        <span class="edit" @click="edit()">编辑</span>
        <span class="del" @click="del()">删除</span>
      </div>
    </div>
    <div class="detailed-content" v-show="status">
      <div class="content-title">
        {{ title }}
        <span class="time fr">{{ insertdate }}</span>
      </div>
      <div class="type">问题类型:
        <span class="type-text" v-show="this.type === '1'">招聘</span>
        <span class="type-text" v-show="this.type === '2'">求职</span>
      </div>
      <div class="content" v-html="solution"></div>
    </div>

    <!-- 常见问题新增页面 -->
    <div class="add" v-show="!status">
      <div class="add-box">
        <div class="add-content">
          <div class="content-item">
            <span class="item-label">标题</span>
            <el-input v-model.trim="title" placeholder="请输入标题" style="width: 200px"></el-input>
          </div>
          <div class="content-item">
            <span class="item-label">问题类型</span>
            <el-select v-model="type" placeholder="请选择问题类型" style="width: 200px">
              <el-option label="招聘" value="1"></el-option>
              <el-option label="求职" value="2"></el-option>
            </el-select>
          </div>
          <div class="content-item">
            <span class="item-label">内容编辑</span>
            <!-- <vue-neditor-wrap
              v-model="solution"
              :config="myConfig"
              :destroy="false"
              @ready="ready"
              style="width: 950px;"
            ></vue-neditor-wrap> -->
            <div style="border: 1px solid #ccc;">
              <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig"
                :mode="mode" />
              <Editor style="height: 300px; overflow-y: hidden;" v-model="solution" ref="editor" :defaultConfig="myConfig"
                :mode="mode" @onCreated="onCreated" @onChange="onChanges" />
            </div>

          </div>
        </div>
      </div>

      <footer class="btn-box">
        <button class="btn-left" @click="cancel()">取消</button>
        <button class="btn-right" @click="outPut()">提交</button>
      </footer>
    </div>
  </div>
</template>

<script src="./detailed.js">
</script>

<style scoped src="./detailed.css"></style>
<style src="@wangeditor/editor/dist/css/style.css"></style>
